<script lang="ts" setup>
import axios from 'axios'
import { IResponse, TChannelArr } from '../types/index'
import { Ref, ref } from 'vue';

// !#3 接收
defineProps<{
  channelId: number
}>()

const emits = defineEmits<{
  (e: 'changeChannelId', id: number): void
}>()

// const channelList = ref<TChannelArr>([])
const channelList: Ref<TChannelArr> = ref([])

const getList = async () => {
  const r = await axios.get<IResponse<{ channels: TChannelArr }>>('http://geek.itheima.net/v1_0/channels')
  channelList.value = r.data.data.channels
  // !#5 修改父亲的 channelId
  emits('changeChannelId', channelList.value[0].id)
}
getList()

const handleClick = (id: number) => {
  emits('changeChannelId', id)
}
</script>

<template>
  <ul class="catagtory">
    <!-- //!#4 用 channelId 和循环时候的 id 进行比较，一样就应用 select class -->
    <li @click="handleClick(item.id)" :class="{
      select: channelId === item.id
    }" v-for="item in channelList" :key="item.id">{{item.name}}</li>
  </ul>
</template>

<style scoed lang="less"></style>
